<!--
 * @Author: wang_sheshe
 * @Date: 2021-08-23 18:49:20
 * @LastEditTime: 2021-08-25 18:58:00
 * @Description: 接收调度令
-->
<template>
    <article class="bg_4dbfae">
        <Theader :title="title">
            <template slot="header_arrow">
                <van-icon size="25" name="arrow-left" @click="$pageBack" />
            </template>
        </Theader>
        <div class="mainBox">
            <div class="col-title">
                <div class="title0">
                    <div class="title1"></div>
                    <span class="title2">操作项目</span>
                    <span class="title3">共 9 项</span>
                </div>
                <span class="title4">录音中</span>
            </div>
            <div class="list" ref="list">
                <div class="item" :class="{current:item.current}" v-for="(item,index) in list" :key="index"
                    @click="currentExecute(item,index)">
                    <van-icon v-if="item.execute" name="success" style="margin-top: 0.3rem;" color="#1FB69F" />
                    <div class="itemText">
                        {{index+1}}、{{item.text}}
                    </div>
                </div>

            </div>
        </div>

        <div class="bot-btn">
            <van-button class="btn-i" size="small" plain color="#2ABAA3" type="primary" @click="pause">暂停
            </van-button>
            <van-button class="btn-i" @click="remark" size="small" plain color="#2ABAA3" type="primary">备注
            </van-button>
            <van-button class="btn-i" @click="errorBreak" size="small" plain color="#2ABAA3" type="primary">异常中断
            </van-button>
        </div>
        <van-popup v-model="show">
            <div class="addConBox">
                <h4 class="mt_1rem">备注</h4>
                <van-field v-model="ticketTemark" :border="show" rows="2" autosize type="textarea" maxlength="50"
                    placeholder="请输入新增的备注" />
                <div class="addBtnBox mt1rem">
                    <div class="cancel" @click='close'>取消</div>
                    <div class="sure" @click='close'>确定</div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="error">
            <div class="addConBox">
                <h4 class="mt_1rem">异常中断</h4>
                <van-field v-model="ticketTemark" :border="show" rows="2" autosize type="textarea" maxlength="50"
                    placeholder="请填写中断原因" />
                <div class="addBtnBox mt1rem">
                    <div class="cancel" @click='closeError'>取消</div>
                    <div class="sure" @click='closeError'>确定</div>
                </div>
            </div>
        </van-popup>
        <div class="drag" @click="excuteFinish" v-drag>
            <div>执行</div>
            <div>完成</div>
        </div>
    </article>
</template>
<script>
    import Theader from "../component/header"
    import SelectSubstation from "../component/SelectSubstation"
    import SelectTeamPeople from "../component/SelectTeamPeople"
    import { drag } from '../../../../utils/moveBtn'
    import { Dialog } from 'vant';
    import Util from "@/utils/util"
    export default {
        name: "revicedCommand",
        directives: {
            drag
        },
        components: {
            Theader,
            SelectSubstation,
            [Dialog.Component.name]: Dialog.Component,
            SelectTeamPeople
        },
        data() {
            return {
                title: "变电倒闸工作票执行",
                show: false,
                error: false,
                ticketTemark:'',
                icon: {
                    iconTitle: require("../../../../assets/tour/icon-title.png"),
                },
                list: [
                    {
                        current: true,
                        execute: true,
                        text: "预演模拟图",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "预演模拟图",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "预演模拟图",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "预演模拟图",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控切换开关确在近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                    {
                        current: false,
                        execute: false,
                        text: "检查1100母联开关遥控近控位置",
                    },
                ],
            }
        },
        computed: {

        },
        methods: {
            ablishBtn() {
                this.$router.push({
                    name: "abolish"
                })
            },
            // 暂停
            pause() {
                Dialog.alert({
                    message: '该操作暂停执行中，点击恢复执行',
                }).then(() => {
                    // on close
                });
            },
            // 备注
            remark(){
                this.show=true
            },
            errorBreak(){
                this.error=true
            },
            // 当前执行
            currentExecute(item, index) {
                // console.log(index);
                this.list.forEach(v => {
                    v.current = false
                });
                item.current = true
                var list = document.getElementsByClassName('item')
                var arr = []
                for (var i = 0; i < list.length; i++) {
                    arr.push(list[i].offsetHeight)
                }
                arr = arr.splice(0, index)
                var top = 0
                for (var i = 0; i < arr.length; i++) {
                    top = top + arr[i]
                }
                this.$nextTick(() => {
                    document.getElementsByClassName('list')[0].scrollTop = top / 2
                })
            },
            close(type) {
                this.show = false
            },
            closeError(type) {
                this.error = false
            },
            // 执行完成
            excuteFinish(){
                this.$router.push({
                    name:"excuteFinish"
                })
            },
        },
        watch: {

        },
        mounted() {

        }
    }
</script>
<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #F0F0F0;
    }

    .col-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        height: 3rem;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0470588235294);
        border-radius: 4px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        width: 95%;
        margin: 0 auto;
        margin-top: 0.8rem;
    }

    .col-col {
        margin: 0 1rem;
        padding: 1rem 0;
    }

    .bot-btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1rem 0;
        font-size: 0.9rem;
    }

    .bot-btn .btn-i {
        width: 30%;
        height: 40px;
    }

    .title0 {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title1 {
        height: 1rem;
        background: #1FB69F;
        width: 3px;
        margin-left: 4%;
    }

    .title2 {
        margin-left: 0.4rem;
        width: 88px;
    }

    .title3 {
        margin-left: 0.4rem;
        width: 88px;
    }

    .title4 {
        margin-right: 1rem;
        width: 70px;
        background-color: rgba(255, 221, 221, 1);
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
        color: #D55F5F;
        border-radius: 25px;
        font-size: 12px;
    }

    .mainBox {
        /* overflow-y: auto; */
        height: calc(100% - 7rem);
        margin-top: 2.8rem;
        background-color: rgba(252, 252, 252, 1);
    }

    .list {
        width: 95%;
        margin: 0 auto;
        height: calc(100vh - 12rem);
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0470588235294);
        border-radius: 4px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        overflow-y: auto;
    }

    .item {
        padding-left: 1rem;
        display: flex;
        min-height: 2rem;
        align-items: center;
        color: #999;
    }

    .itemText {
        margin-left: 0.5rem;
        font-size: 0.8rem;
    }

    .current {
        color: #000 !important;
        height: 3rem !important;
        font-size: 1rem !important;
        border-top: 1px solid #f9f9f9;
        border-bottom: 1px solid #f9f9f9;
        box-shadow: 0 0 12px #999;
        color: #1fb69f !important;
        font-weight: 600;
    }

    .addConBox {
        width: 93vw;
        height: 18rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .van-popup--center {
        border-radius: 12px !important;
    }

    /deep/.van-cell {
        border: 1px solid #ccc;
        width: 90%;
        height: 9rem;
        border-radius: 4px;
    }
    .addBtnBox{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .addBtnBox>div{
        flex: 0.4;
        height: 3rem;
        line-height: 3rem;
        border-radius: 4px;
        text-align: center;
    }
    .cancel{
        border: 1px solid #0EB295;
        color: #0EB295;
    }
    .sure{
        background-color: #0EB295;
        color:#fff;
    }
    .mt1rem{
        margin-top: 1rem;
    }
    .mt_1rem{
        margin-top: -1rem;
    }
    .drag {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: #0EB295;
        font-size: 0.5rem;
        text-align: center;
        position: absolute;
        bottom: 10%;
        right: 5%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 4px 0px #0EB295;
        z-index: 999;
    }
</style>